<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.图片局部放大器</title>
    <style>
        canvas{
            border:1px solid #aaa;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas width="400" height="400"></canvas>

    <script type="module">

        import { loadImage, getImageData, traverse, gaussianBlur } from "/common/lib/utils.js"
        import { transformColor, multiply, grayscale, brightness, saturate, contrast } from "/common/lib/color-matrix.js"

        const canvas = document.querySelector('canvas'); 
        const context = canvas.getContext('2d');

        (async function (){
            // 异步加载图片
            let img = await loadImage('https://p2.ssl.qhimg.com/d/inn/4b7e384c55dc/girl1.jpg');
            
            // 获取图片剪裁区的数据 imgData（包含了图片的所有像素数据）
            const imageData = getImageData(img);

            canvas.width = imageData.width;
            canvas.height = imageData.height;
            context.putImageData(imageData, 0, 0);
            // 监听鼠标移动事件
            document.addEventListener("mousemove",(e)=>{
                const { x, y } = canvas.getBoundingClientRect();
                let pageX = e.pageX;
                let pageY = e.pageY;
                pageX -= x;
                pageY -= y;
                enlargeByHover(context, imageData, pageX, pageY, 100, 2);
            });
        })();

        /**
         * 鼠标移动放大效果
         * @param ctx { object } canvas上下文
         * @param imageData { object } 画布图片剪裁区的数据
         * @param hoverx { number } 鼠标中心x坐标
         * @param hovery { number } 鼠标中心y坐标
         * @param radius { number } 放大区域半径
         * @param scale { float } 放大范围
         * */ 
        function enlargeByHover(ctx, imageData, hoverx, hovery, radius, scale){
            // 图片的大小跟像素数据
            const { data, width, height } = imageData;
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    // 保存像素的颜色
                    let i = (y * width + x) * 4;
                    let r = data[i],
                        g = data[i+1],
                        b = data[i+2],
                        a = data[i+3];
                    // 计算半径范围
                    let s = Math.sqrt((x - hoverx) ** 2 + (y - hovery) ** 2);
                    if(s <= radius / scale){
                        // 图像放大
                        let new_x = parseInt((x - hoverx) * scale + hoverx);
                        let new_y = parseInt((y - hovery) * scale + hovery);
                        let new_index = (new_y * width + new_x) * 4;
                        r = data[new_index];
                        g = data[new_index+1];
                        b = data[new_index+2];
                        a = data[new_index+3];
                    }
                    r = Math.min(255, Math.max(0, r));
                    g = Math.min(255, Math.max(0, g));
                    b = Math.min(255, Math.max(0, b));
                    a = Math.min(255, Math.max(0, a));

                    data[i] = r
                    data[i+1] = g
                    data[i+2] = b
                    data[i+3] = a
                }
            }
            // ctx.clearRect(0,0,imageData.width,imageData.height)
            ctx.putImageData(imageData, 0, 0);
        }

        // 鼠标拖动放大效果
        function enlargeByDrag(ctx, imageData, hoverx, hovery, radius){

            ctx.putImageData(imageData, 0, 0);
        }
        
    </script>
</body>
</html>